<template>
	<view class="wrap">
		<u-toast ref="uToast" />
		<u-form :model="form" ref="uForm" label-position="top">
			<u-form-item label="所属板块" prop="bankuai">
				<u-input v-model="form.bankuai" type="select" @click="selectshow = true" placeholder="请选择板块"/>
			</u-form-item>
			<u-form-item label="设备名称" prop="device_name">
				<u-input v-model="form.device_name" placeholder="请输入设备名称"/>
			</u-form-item>
			<u-form-item label="设备序列号" prop="device_serial">
				<u-input v-model="form.device_serial" placeholder="请输入设备序列号"/>
			</u-form-item>
			<u-form-item label="设备验证码" prop="validate_code">
				<u-input v-model="form.validate_code" placeholder="请输入设备验证码"/>
			</u-form-item>
		</u-form>
		<u-action-sheet :list="bankuaiList" v-model="selectshow" @click="bankuaiCallback" :cancel-btn="false"></u-action-sheet>
		<u-button class="addbtn" type="primary" @click="submit">提交</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectshow: false,
				bankuaiList:[],
				form: {
					bankuai:'',
					bk_id:0,
					device_serial: '',
					validate_code: '',
				},
				rules: {
					bankuai: [
						{ 
							required: true, 
							message: '请选择板块', 
							trigger: 'blur',
						}
					],
					device_name: [
						{ 
							required: true, 
							message: '请输入设备名称', 
							trigger: 'blur',
						}
					],
					device_serial: [
						{ 
							required: true, 
							message: '请输入设备序列号', 
							trigger: 'blur',
						}
					],
					validate_code: [
						{
							required: true,
							message: '请输入设备验证码', 
							trigger: 'blur'
						}
					]
				}
			};
		},
		onLoad() {
			this.getBkList();
		},
		methods: {
			submit() {
				let that = this;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						var data = {bk_id:that.form.bk_id, device_name:that.form.device_name, device_serial:that.form.device_serial, validate_code:that.form.validate_code};
						that.$base.request(that.$api.AddShebei, 'POST', data, 1, 1).then(res => {
							that.$refs.uToast.show({
								title: '添加成功！',
								type: 'success',
							});
							setTimeout(()=>{that.$u.route({url:'/pages/index/index',type:'reLaunch'})}, 2000);
						}).catch(err => {
							uni.showToast({
								title: err.msg,
								icon: 'none'
							});
						})
					}
				});
			},
			bankuaiCallback(index) {
				this.form.bankuai = this.bankuaiList[index].text;
				this.form.bk_id = this.bankuaiList[index].id;
			},
			getBkList(){
				let that = this;
				that.$base.request(that.$api.GetBkList, 'GET', {}, 1, 1).then(res => {
					that.bankuaiList = res.data;
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					});
				})
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
	page{
		width:100vw;
		height:100vh;
	}
	.wrap{
		margin:40rpx;
		display: flex;
		flex-direction: column;
	}
	.addbtn{
		width:70%;
		position: absolute;
		bottom:10%;
		right:16%;
	}
</style>
